<template>
  <div>
    <div class="tools">
      <el-input v-model="start" size="small" placeholder="仅限南京范围内的规划" />
      <el-input v-model="end" size="small" placeholder="仅限南京范围内的规划" />
      <el-button size="small" @click="startFn">开始规划路线</el-button>
      <el-button size="small" @click="startLuShu">开始轨迹</el-button>
      <el-checkbox v-model="checked">点聚合</el-checkbox>
    </div>
    <div id="map" />
  </div>
</template>

<script>
import points from '@/data/points.json'

export default {
  data() {
    return {

      start: '黑马程序员',
      end: '新街口',
      map: null,
      markers: [],
      checked: true,
      markerClusterer: null,
      city: '',
      drRoute: null, // 路线规划的线
      icon: null
    }
  },
  watch: {
    checked() {
      if (this.markers.length && this.checked && this.markerClusterer) {
        this.markerClusterer.addMarkers(this.markers)
      } else {
        this.markerClusterer.clearMarkers()
      }
    }
  },
  mounted() {
    const map = new BMap.Map('map')
    map.centerAndZoom(new BMap.Point(118.778611, 32.043889), 5)
    map.enableScrollWheelZoom()
    this.map = map
    const markers = points.splice(0, 500).map(item => {
      return new BMap.Marker(new BMap.Point(...item.lnglat))
    })
    this.markers = markers
    if (this.markers.length && this.checked) {
      this.markerClusterer = new BMapLib.MarkerClusterer(this.map, { markers })
    }
  },
  methods: {
    startFn() {
      const map = this.map
      var p1 = null
      var p2 = null
      var flag = true
      var myGeo = new BMap.Geocoder()
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(this.start, function(point) {
        p1 = point
        if (p1 && p2 && flag) {
          driving.search(p1, p2)
          flag = false
        }
      }, '南京')
      myGeo.getPoint(this.end, function(point) {
        p2 = point
        if (p1 && p2 && flag) {
          driving.search(p1, p2)
          flag = false
        }
      }, '南京')
      const VM = this
      var driving = new BMap.DrivingRoute(map, { map, autoViewport: true,
        onSearchComplete: function(res) {
          if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
            var plan = res.getPlan(0)
            var arrPois = []
            for (var j = 0; j < plan.getNumRoutes(); j++) {
              var route = plan.getRoute(j)
              arrPois = arrPois.concat(route.getPath())
            }
            if (VM.drRoute) map.removeOverlay(VM.drRoute) // 清除上一次路线
            if (VM?.lushu?._marker) map.removeOverlay(VM.lushu._marker) // 打印路书实例，查看里面有_marker

            VM.drRoute = new BMap.Polyline(arrPois, { strokeColor: '#111' })
            VM.icon = new BMap.Icon('https://webapi.amap.com/images/car.png', new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) })
            map.addOverlay(VM.drRoute)
            map.setViewport(arrPois)

            VM.lushu = new BMapLib.LuShu(map, arrPois, {
              defaultContent: '', // "从天安门到百度大厦"
              autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
              icon: VM.icon,
              speed: 4500,
              enableRotation: true, // 是否设置marker随着道路的走向进行旋转
              landmarkPois: []
            })
          }
        }
      })
    },
    startLuShu() {
      this.lushu.start()
    }
  }
}
</script>

<style lang="scss">
#map {
   width: 100%;
   height: 70vh;
}
.tools {
    margin: 10px;
    align-content: center;
    .el-input {
        width: 240px;
        margin-right: 30px;
    }
    div{
        margin-left: 20px;
    }
    .el-checkbox  {
        margin-left: 20px;
    }
}

</style>
